<template>
    <div class="supplier-add">
        <a-modal width="900px" :visible="visible" :title="modalOption.title" @ok="modalOption.onOk" @cancel="modalOption.onCancel"
            :okText="modalOption.okText" :cancelText="modalOption.cancelText" class="yuan-modal supplier-add-modal">
            <a-spin tip="Loading..." :spinning="formLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData" :rules="rules"
                    :label-col="{ style: { width: '100px' } }" :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">
                        <div class="form-panel-box yuan-form-col5">
                            <a-form-model-item class="yuan-form-item" label="供应商名称" prop="name">
                                <a-input class="yuan-form-input" v-model="formData.name" placeholder="请输入"></a-input>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="备案品种" prop="materialCodeArr">

                                <a-select class="yuan-form-input" v-model="formData.materialCodeArr" placeholder="请选择"
                                    mode="multiple">
                                    <a-select-option :value="item.materialCode"
                                        v-for="item in materialList" :key="item.materialCode">{{item.varietyName}}</a-select-option>
                                </a-select>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="联系方式" prop="phone">
                                <a-input class="yuan-form-input" v-model="formData.phone" placeholder="请输入"></a-input>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="联系人" prop="contact">
                                <a-input class="yuan-form-input" v-model="formData.contact" placeholder="请输入"></a-input>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="所在地区" prop="placeAreaCode">
                                <a-cascader class="yuan-form-input" v-model="formData.placeAreaCode" :options="addrData"
                                    placeholder="请选择" @change="onAddrChange" />

                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="详细地址" prop="detailedAddress">
                                <a-input class="yuan-form-input" v-model="formData.detailedAddress" placeholder="请输入"></a-input>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="状态" prop="state">
                                <a-radio-group v-model="formData.state"
                                    :options="[{ 'label': '启用', value: 1 }, { 'label': '禁用', value: 2 }]" :default-value="1" />
                            </a-form-model-item>
                        </div>
                    </div>
                </a-form-model>
            </a-spin>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import nextApi, { MaterialListRes } from "@/api/nextApi";
import Upload from "@/components/upload.vue";
import areaJson, { getAreaWords } from "@/utils/area";

@Component({
    name: "Add",
    components: { Upload },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) infoId!: string;
    @Watch("visible")
    visibleChange() {
        if (this.visible) this.getDetail();
        this.modalOption.title = this.infoId ? "编辑供应商" : "新增供应商";
    }
    addrData: any[] = [];
    formLoading = false;
    modalOption = {
        title: "新增供应商",
        okText: "保存",
        cancelText: "取消",
        onOk: () => {
            this.modalOk();
        },
        onCancel: () => {
            this.closeModal();
        },
    };
    rules = {
        name: [{ required: true, message: "请输入供应商名称", trigger: "blur" }]
    };
    formData: any = {};
    resetForm() {
        this.formData = {};
    }
    async mounted() {
        this.setAddrData();
        this.resetForm();
    }
    closeModal() {
        this.resetForm();
        (this.$refs.form as any).resetFields();
        this.$emit("closeModal");
    }
    modalOk() {
        (this.$refs.form as any).validate(async (valid: any) => {
            if (valid) {
                try {
                    this.formLoading = true;
                    delete this.formData.recordVariety
                    const res = await nextApi.editSupplier({
                        ...this.formData,
                        recordVarietyJson: this.formData.materialCodeArr.map((item: string) => {
                            const findOne = this.materialList.find((material) => material.materialCode === item);
                            return {
                                varietyName: findOne?.varietyName,
                                materialCode: findOne?.materialCode,
                            };
                        }),
                    });
                    this.$message.success(res.msg);
                    this.closeModal()
                    this.$emit("resetList");
                } finally {
                    this.formLoading = false;
                }
            }
        });
    }
    async getDetail() {
        this.formLoading = true;
        try {
            await this.getMaterials();
            if (this.infoId) {
                const res = await nextApi.getSupplierDetail({ id: this.infoId });
                const materialCodeArr = res.data.recordVariety.map((item) => item.materialCode);
                const placeAreaCode = res.data.code ? res.data.code.split(";") : [];
                this.formData = { ...res.data, materialCodeArr, placeAreaCode };
            } else {
                this.formData = { state: 1, materialCodeArr: [], placeAreaCode: [] };
            }
        } finally {
            this.formLoading = false;
        }
    }
    materialList: MaterialListRes[] = [];
    async getMaterials() {
        if (this.materialList && this.materialList.length > 0) return;
        const res = await nextApi.getMaterialList({
            productType: "中药材",
            state: 0,
        });
        this.materialList = res.data?.rows || [];
    }
    onAddrChange(e: any) {
        this.formData.code = e.join(";");
        this.formData.placeArea = getAreaWords(e);
    }
    setAddrData() {
        this.addrData = areaJson;
    }
}
</script>
<style lang="scss"></style>
